<template>
  <div class="information">
    <div class="change">
      <div class="change-title">个人信息</div>
      <div class="change-content">

        <el-upload
          :auto-upload="false"
          :on-change="uploadAvatar"
          list-type="picture"
        >
          <el-button type="primary">上传头像</el-button>
          <template #tip>
            <div class="el-upload__tip">
              头像大小尽量不要太大了
            </div>
          </template>
        </el-upload>


        <el-form 
        :model="form" 
        label-width="100px"
        status-icon
        ref="formRef"
        >
          <el-form-item  label="昵称">
            <el-input v-model="form.nickname" />
          </el-form-item>
          <el-form-item  label="友链">
            <el-input v-model="form.link" />
          </el-form-item>
          <el-form-item  label="个人描述">
            <el-input v-model="form.describe" />
          </el-form-item>
          
        </el-form>
      </div>
      <div class="change-btn">
        <el-button @click="changeInfo">修改信息</el-button>
        <div>注意*** 1.友链请以http或https开头</div>
        <div>Token如果过期了,麻烦重新登录</div>
        <div class="to" @click="toHomeHandleClick">
          <div  class="toHome">去首页</div>
        </div>
        
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { FormRules, ElForm } from 'element-plus'
import { localCache } from '@/utils/cache'
import { useRouter } from 'vue-router' 
import useInformationStore from '@/store/blog/information'

const router = useRouter()

const informationStore = useInformationStore()
const form = reactive({
  nickname: localCache.getCache('nickname') ?? '',
  link: localCache.getCache('link') ?? '',
  describe: localCache.getCache('signature') ?? ''
}) 


const avatarData = ref<any>()
function uploadAvatar(uploadFile: any, uploadFiles: any)  {
  // console.log(uploadFile, uploadFiles);
  //这其实就是一个钩子函数 主要还是取到uploadFile 上传文件的信息 然后new一个FormData 然后 formData.append('picture', file);发请求的时候把formData传进去请求里面去
  const file = uploadFile.raw;
  const formData = new FormData();
  formData.append('avatar', file);
  avatarData.value = formData
}

function changeInfo() {
  // console.log(form.nickname,form.link,form.describe)
  informationStore.updateUserInfoAction(form.nickname,form.link,form.describe, avatarData.value)
}

function toHomeHandleClick() {
  router.push('/')
}

</script>

<style scoped lang="less">
.information {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  .change {
    text-align: center;
    .change-title {
      margin: 10px 0;
    }
    .change-content {
      .el-input {
        width: 200px;
        margin-right: 50px;
      }
    }
    .change-btn {
      .el-button {
        width: 300px;
        color: #fff;
        background-color: #409EFF;
        border: #409EFF;
        &:hover {
          background-color: #74b1ee;
        }
      }
      div {
        margin: 20px 0;
        color: #da0f0f;
      }
      .to {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        .toHome {
          z-index: 1;
          position: relative;
          color: #fff;
          padding: 0.7em 1.2em;
          background-color: #409EFF;
          cursor: pointer;
        }
        .toHome::before {
          content: '';
          z-index: -1;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          border: 4px solid #409EFF;
          transform-origin: center;
          transform: scale(1);
        }
        .toHome:hover::before {
          transition:  all 0.75s ease-in-out;
          transform-origin: center;
          transform: scale(1.72);
          opacity: 0;
        }
      }
      
    }
  }
}

</style>
